<template>
    <div id="user">
        <div class="container" style="background-color:#f5f5f5">
            <!-- 登录状态 -->
            <div class="loginState">
                <!-- 已登录 -->
                <template v-if="isLogin">
                    <div @click.stop='userInfoTap'>
                        <div class="wrapper">
                            <img class="userProfile" :src="userInfo.headimgurl">
                            <div style="padding-left:10px;">
                              <p class="userName">{{userInfo.nickname}}</p>
                              <p v-if="userInfo.role === 'general'" class="applyName" @click.stop='authorTap'>申请作者</p>
                              <p v-if="userInfo.role === 'author'" class="applyName" @click.stop='authorTap'>申请作者</p>
                            </div>
                        </div>
                    </div>
                </template>
                <!-- 未登录 -->
                <template v-else>
                    <router-link class="wrapper" :to="{name: 'login'}">
                        <img class="userProfile" src="~@/assets/img/myLogin.png">
                        <span class="userName">点击登录</span>
                    </router-link>
                </template>
            </div>
            <!-- 菜单 -->
            <div class="menu">
                <div class="menu-item" @click.stop="goToMyDynamic">
                    <p class="menu-value">{{userInfo.member_content_num}}</p>
                    <p class="menu-title">动态</p>
                </div>
                <div class="menu-item" @click.stop="goToMyCollect">
                    <p class="menu-value">{{userInfo.collect_num}}</p>
                    <p class="menu-title">收藏</p>
                </div>
                <div class="menu-item" @click.stop="goToMyFans">
                    <p class="menu-value">{{userInfo.collected_num}}</p>
                    <p class="menu-title">粉丝</p>
                </div>
            </div>
            <div class="group">
                <ul>
                    <!-- 我的评论 -->
                    <li>
                        <div class="list_box">
                            <img src="~@/assets/img/p_wallet.png">
                            <span>我的钱包</span>
                        </div>
                        <img src="~@/assets/img/p_arrow.png">
                    </li>
                    <li style="line-height:0.7rem">
                        <div class="wallet">
                            <div class="menu-item" @click.stop="goToMyWeight">
                                <p class="menu-value" style="color:#f44e4e">{{userInfo.integral}}</p>
                                <p class="menu-title">权重</p>
                            </div>
                            <div class="menu-item" style='border-left: 1px solid #f5f5f5' @click.stop="goToMyGold">
                                <p class="menu-value" style="color:#f44e4e">{{userInfo.gold}}</p>
                                <p class="menu-title">金币</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 用户列表 -->
            <div class="group">
                <ul>
                    <!-- 我的关注 -->
                    <li @click.stop="goToMyFans">
                         <div class="list_box">
                            <img src="~@/assets/img/p_attention.png">
                            <span>我的关注</span>
                        </div>
                        <img src="~@/assets/img/p_arrow.png">
                    </li>
                    <!-- 我的问答 -->
                    <li @click.stop="goToMyQuestion">
                       <div class="list_box">
                           <img src="~@/assets/img/p_question.png">
                           <span>我的问答</span>
                       </div>
                       <img src="~@/assets/img/p_arrow.png">
                    </li>
                </ul>
            </div>
            <!-- 其他列表 -->
            <div class="group">
                <ul>
                    <!-- 邀请有奖 -->
                    <li @click.stop="goToMyPrize">
                       <div class="list_box">
                           <img src="~@/assets/img/p_share.png">
                           <span>邀请有奖</span>
                       </div>
                       <img src="~@/assets/img/p_arrow.png">
                    </li>
                    <!-- 用户反馈 -->
                    <li @click.stop="goToMySuggestion">
                        <div class="list_box">
                            <img src="~@/assets/img/p_suggestion.png">
                            <span>用户反馈</span>
                        </div>
                       <img src="~@/assets/img/p_arrow.png">
                    </li>
                </ul>
            </div>
            <div class="group">
                <ul>
                    <li>
                        <router-link style='width:100%' :to="{name: 'setup'}">
                            <div class="list_box">
                                <img src="~@/assets/img/p_set.png">
                                <span>系统设置</span>
                            </div>
                        </router-link>
                       <img src="~@/assets/img/p_arrow.png">
                    </li>
                </ul>
            </div>
        </div>
        <!-- 子页面视图 -->
        <keep-alive exclude='myComment,health,publish'>
            <router-view></router-view>
        </keep-alive>
    </div>
</template>
<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
export default {
    name: 'user',
    data() {
        return {
        }
    },
    computed: {
        ...mapGetters('login', [
            'isLogin'
        ]),
        ...mapGetters('user', [
            'userInfo'
        ])
        // ...mapGetters('collect', [
        //     'collectArticle'
        // ])
    },
    methods: {
        ...mapMutations('login', [
            'set_isLogin'
        ]),
        ...mapActions('user', [
            'get_userInfo_data'
        ]),
        ...mapMutations('user', [
            'set_userInfo'
        ]),
        init() {
            if (this.isLogin) {
              this.getUserInfo()
            }
        },
        // 获取个人详情数据
        getUserInfo() {
          this.get_userInfo_data()
            .then(res => {
                // console.log(res)
                this.set_userInfo(res.data)
            })
        },
        // 个人详情
        userInfoTap() {
            this.$router.push({name: 'userInfo'})
        },
        // 申请作者
        authorTap() {
            this.$router.push({name: 'author'})
        },
        // 我的动态
        goToMyDynamic() {
            if (this.isLogin) {
                this.$router.push({name: 'myComment'})
            } else {
                this.$toast({ message: '未登录', duration: 1500 })
            }
        },
        // 我的收藏
        goToMyCollect() {
            if (this.isLogin) {
                this.$router.push({name: 'collect'})
            } else {
                this.$toast({ message: '未登录', duration: 1500 })
            }
        },
        // 我的粉丝
        goToMyFans() {
            if (this.isLogin) {
                this.$router.push({name: 'myFans'})
            } else {
                this.$toast({ message: '未登录', duration: 1500 })
            }
        },
        // 我的权重
        goToMyWeight() {
            if (this.isLogin) {
                this.$router.push({name: 'myWeight'})
            } else {
                this.$toast({ message: '未登录', duration: 1500 })
            }
        },
        // 我的金币
        goToMyGold() {
            if (this.isLogin) {
                this.$router.push({name: 'myGold'})
            } else {
                this.$toast({ message: '未登录', duration: 1500 })
            }
        },
        // 我的问答
        goToMyQuestion() {
            if (this.isLogin) {
                this.$router.push({name: 'myComment'})
            } else {
                this.$toast({ message: '未登录', duration: 1500 })
            }
        },
        // 邀请有奖
        goToMyPrize() {
            if (this.isLogin) {
                this.$router.push({name: 'prize'})
            } else {
                this.$toast({ message: '未登录', duration: 1500 })
            }
        },
        // 我的反馈
        goToMySuggestion() {
            if (this.isLogin) {
                this.$router.push({name: 'feedBack'})
            } else {
                this.$toast({ message: '未登录', duration: 1500 })
            }
        }

    },
    created() {
    },
    activated() {
        this.init()
    }
}
</script>
<style lang='stylus'>
#user {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 16px;
    padding-bottom: 48px;
    a{
        text-decoration: none;
    }
    .loginState{
        position: relative;
        width: 100%;
        height: 4rem;
        overflow: hidden;
        .wrapper{
            margin-top: 50px;
            margin-left: 20px;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            text-align: center;
            .userProfile{
                display: block;
                border-radius: 50%;
                width: 2.2rem;
                height: 2.2rem;
                text-align: center;
                vertical-align: middle;
                box-shadow: 0 0 20px #000;
            }
            .userName{
                font-size: 16px;
                color: #fff;
            }
            .applyName{
              margin-top: 7px;
              font-size: 13px;
              color: #fff;
              background: #ff8d00;
              border-radius: 20px;
              width: 70px;
            }
        }
    }
    .menu{
        width: 100%;
        display: flex;
        background: #3d3d3d;
        .menu-item{
            flex: 1;
            text-align: center;
            padding: 0.25rem 0;
            color: #fff;
            .menu-value{
                font-size: 0.533rem;
                padding-bottom: 0.133rem;
            }
            .menu-title{
                font-size: 0.373rem;
            }
        }
    }
    .wallet{
        width: 100%;
        display: flex;
        background: #fff;
        padding: 0.25rem 0;
        .menu-item{
            flex: 1;
            text-align: center;
            color: #222222;
            .menu-value{
                font-size: 0.533rem;
            }
            .menu-title{
                font-size: 0.373rem;
            }
        }
    }
    .group{
        margin: 0.2rem 0;
        ul{
            li{
                color: #333;
                min-height: 1.5rem;
                background #fff;
                line-height : 1.5rem;
                padding-left: 0.5rem;
                padding-right: 0.25rem;
                position relative;
                display: flex;
                display: -webkit-flex;
                justify-content: space-between;
                align-items: center;
               .list_box{
                 display: flex;
                 display: -webkit-flex;
                 align-items: center;;
                 img{
                   width: 25px;
                   height: 25px;
                 }
                 span{
                   padding-left: 10px;
                 }
               }
               img{
                 width: 35px;
                 height: 35px;
               }
            }
            li:after{
                position: absolute;
                right: 0;
                bottom: 0;
                left: 0px;
                height: 1px;
                content: '';
                background-color: #f3f3f3;
            }
            li:last-child:after{
                display : none;
            }
        }
    }
    .mint-cell{
        color: #333;
        min-height: 1.2rem;
        .mint-cell-wrapper{
            font-size: 0.426rem;
            padding-left: 0.5rem;
            padding-right: 0.25rem;
        }
    }
}
</style>
<style>
#user .loginState{
    background-color: #3d3d3d;
}
#user .icon-arrow-right {
    display: table-cell;
    vertical-align: middle;
    width: 0.5rem;
    height: 0.32rem;
    background: url('~@/assets/img/back_right.png') no-repeat center center;
    background-size: cover;
}
</style>
